<template>
  <div class="app-container">
    <el-card class="cardClass">
      <el-table :data="tableList">
        <el-table-column label="序号" type="index" width="50" align="center" />
        <el-table-column label="实践课程" align="center" prop="name" />
        <el-table-column label="成绩" align="center" prop="allScore" />
        <el-table-column label="积分" align="center" prop="integral">
          <template slot-scope="scope">
            {{ scope.row.integral || '未设置' }}
          </template>
        </el-table-column>
        <el-table-column label="第一学期积分" align="center" prop="firstTermPoints" />
        <el-table-column label="第二学期积分" align="center" prop="secondTermPoints" />
        <el-table-column label="第三学期积分" align="center" prop="thirdTermPoints" />
        <el-table-column label="第四学期积分" align="center" prop="fourthTermPoints" />
        <el-table-column label="第五学期积分" align="center" prop="fifthTermPoints" />
        <el-table-column label="第六学期积分" align="center" prop="sixthTermPoints" />
      </el-table>

      <div>
        <div style="margin-top: 20px;margin-bottom: 15px;" class="inforClass">
          积分设置
        </div>
        <div v-if="practiceType">
          <el-form>
            <el-form-item label="实践课程:">
              <el-select v-model="practiceType" placeholder="请选择" @change="getList" size="small">
                <el-option v-for="item in practiceTypeList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <el-table :data="[{}]" style="width: 100%;" align="center" header-align="center">
            <el-table-column prop="name" label="分数" width="150" align="center" fixed>
              积分换算: 100分 =
            </el-table-column>
            <el-table-column prop="address" label="总积分" width="190" align="center">
              <el-input-number v-model="integral" controls-position="right" size="small" :min="0" :max="100000"
                @change="calculateRemaining" />积分 =
            </el-table-column>
            <el-table-column prop="address1" label="第一学期" min-width="170" align="center">
              <el-input-number v-model="firstTermPoints" controls-position="right" size="small" :min="0" :max="integral"
                @change="calculateRemaining" />积分 +
            </el-table-column>
            <el-table-column prop="address2" label="第二学期" min-width="170" align="center">
              <el-input-number v-model="secondTermPoints" controls-position="right" size="small" :min="0" :max="integral"
                @change="calculateRemaining" />积分 +
            </el-table-column>
            <el-table-column prop="address3" label="第三学期" min-width="170" align="center">
              <el-input-number v-model="thirdTermPoints" controls-position="right" size="small" :min="0" :max="integral"
                @change="calculateRemaining" />积分 +
            </el-table-column>
            <el-table-column prop="address4" label="第四学期" min-width="170" align="center">
              <el-input-number v-model="fourthTermPoints" controls-position="right" size="small" :min="0" :max="integral"
                @change="calculateRemaining" />积分 +
            </el-table-column>
            <el-table-column prop="address5" label="第五学期" min-width="170" align="center">
              <el-input-number v-model="fifthTermPoints" controls-position="right" size="small" :min="0" :max="integral"
                @change="calculateRemaining" />积分 +
            </el-table-column>
            <el-table-column prop="address6" label="第六学期" min-width="170" align="center">
              <el-input-number v-model="sixthTermPoints" controls-position="right" size="small" :min="0" :max="integral"
                @change="calculateRemaining" />积分
            </el-table-column>
          </el-table>
        </div>
      </div>

      <div class="footer" v-if="practiceType">
        <el-button type="primary" @click="save" v-hasPermi="['project:config:edit']">保存</el-button>
        <el-button @click="getList">重置</el-button>
      </div>

    </el-card>
  </div>
</template>

<script>
import { typeCongfigList } from "@/api/semesManage";
import { configList, configInfo, configPut } from "@/api/achievePoints";
export default {
  name: "pointsSetting",
  data() {
    return {
      tableList: [],
      practiceType: 1,
      practiceTypeList: [],
      integral: 0,
      firstTermPoints: 0,
      secondTermPoints: 0,
      thirdTermPoints: 0,
      fourthTermPoints: 0,
      fifthTermPoints: 0,
      sixthTermPoints: 0,
    };
  },
  watch: {},
  computed: {},
  created() {
    // const permissList = sessionStorage.getItem('practiceTypes').split(',');
    // const typeMap = {
    //   1: { type: '劳动教育', id: 1 },
    //   2: { type: '职业素养', id: 2 },
    //   3: { type: '应急安全', id: 3 },
    //   4: { type: '思政实践', id: 4 },
    //   5: { type: '创新创业', id: 5 }
    // };

    // permissList.forEach(v => {
    //   if (typeMap[v]) {
    //     this.practiceTypeList.push(typeMap[v]);
    //   }
    // });
    this.getTypeCongfigList();
    this.getConfigList();
  },
  methods: {
    getTypeCongfigList() {
      typeCongfigList({
        pageNum: 1,
        pageSize: 50,
      }).then(res => {
        this.practiceTypeList = res.rows;
        this.practiceType = this.practiceTypeList[0].id;
        if (this.practiceTypeList.length > 0) {
          this.getList();
        };
      });
    },
    calculateRemaining() {
      this.$nextTick(() => {
        this.sixthTermPoints = 0;
        const sum = this.getValidIntegralSum();
        const remaining = this.integral - sum;
        if (remaining < 0) {
          this.$message.error('积分总和超过了设置的总数');
          return;
        }
        this.sixthTermPoints = remaining;
      });
    },
    getValidIntegralSum() {
      return [
        this.firstTermPoints || 0,
        this.secondTermPoints || 0,
        this.thirdTermPoints || 0,
        this.fourthTermPoints || 0,
        this.fifthTermPoints || 0,
        this.sixthTermPoints || 0,
      ].reduce((a, b) => a + b, 0);
    },
    getConfigList() {
      configList().then(res => {
        res.rows.forEach(x => {
          x.allScore = 100;
        });
        this.tableList = res.rows;
      })
    },
    getList() {
      configInfo(this.practiceType).then(res => {
        this.integral = res.data.integral || 0;
        this.firstTermPoints = res.data.firstTermPoints || 0;
        this.secondTermPoints = res.data.secondTermPoints || 0;
        this.thirdTermPoints = res.data.thirdTermPoints || 0;
        this.fourthTermPoints = res.data.fourthTermPoints || 0;
        this.fifthTermPoints = res.data.fifthTermPoints || 0;
        this.sixthTermPoints = res.data.sixthTermPoints || 0;
      })
    },
    save() {
      // if (this.firstTermPoints == 0) return this.$message.error('第一学期积分不得为0');
      // if (this.secondTermPoints == 0) return this.$message.error('第二学期积分不得为0');
      // if (this.thirdTermPoints == 0) return this.$message.error('第三学期积分不得为0');
      // if (this.fourthTermPoints == 0) return this.$message.error('第四学期积分不得为0');
      // if (this.fifthTermPoints == 0) return this.$message.error('第五学期积分不得为0');
      // if (this.sixthTermPoints == 0) return this.$message.error('第六学期积分不得为0');
      if (this.integral === 0) return this.$message.error('积分值必须大于0');
      const sum = this.getValidIntegralSum();
      if (sum > this.integral) return this.$message.error('积分总和超过了设置的总数');
      if (sum != this.integral) return this.$message.error('积分总和与设置的总数不相等，请检查');

      const data = {
        id: this.practiceType,
        integral: this.integral,
        score: 100,
        firstTermPoints: this.firstTermPoints,
        secondTermPoints: this.secondTermPoints,
        thirdTermPoints: this.thirdTermPoints,
        fourthTermPoints: this.fourthTermPoints,
        fifthTermPoints: this.fifthTermPoints,
        sixthTermPoints: this.sixthTermPoints,
      };
      configPut({ ...data }).then(res => {
        this.$message.success('保存成功');
        this.getConfigList();
        this.getList();
      })
    },
  },
};
</script>
<style scoped lang="scss">
.cardClass {
  // height: 80vh;
  position: relative;
}

.inforClass {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}

.inforClass::before {
  content: '';
  width: 5px;
  height: 25px;
  background-color: #419eff;
  margin-right: 10px;
  display: inline-block;
}

.footer {
  // position: absolute;
  // bottom: 20px;
  // left: 40%;
  text-align: center;
  margin-top: 20px;
}

::v-deep .el-input-number--small {
  width: 100px !important;
}

::v-deep .el-row {
  width: 100% !important;
  display: flex;
  justify-content: space-around;
}

.el-row,
.el-col {
  box-sizing: border-box;
}

.biaotou {
  ::v-deep .el-table__body-wrapper {
    display: none !important;
  }
}
</style>
